<template>
  <el-row class="mb24" :gutter="20">
    <el-col :span="6">
      <div class="item">
        <el-tag>身高：</el-tag>
        <el-input v-model="state.form.height" placeholder="请输入身高（cm）"></el-input>
      </div>

    </el-col>
    <el-col :span="6">
      <div class="item">
        <el-tag type="warning">体重：</el-tag>
        <el-input v-model="state.form.weight" placeholder="请输入体重（kg）"></el-input>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="item">
        <el-tag type="success">年龄：</el-tag>
        <el-date-picker
          style="width: 100%;"
          v-model="state.birthday"
          type="year"
          placeholder="请选择出生日期"
          value-format="YYYY"
        />
      </div>
    </el-col>
    <el-col :span="6">
      <el-button @click="clear">清除</el-button>
    </el-col>
  </el-row>

  <el-row class="mb24" :gutter="20">
    <el-col :span="10">
      <div class="item">
        <el-tag>身体活动校正系数：</el-tag>
        <el-radio-group v-model="pa" class="ml-4">
          <el-radio
            v-for="item in paList"
            :key="item.label"
            :label="item.label"
            size="large"
          >
            {{ item.value }}
          </el-radio>
        </el-radio-group>
      </div>
    </el-col>
    <el-col :span="9">
      <div class="item">
        <el-tag type="warning">热量盈余（kcal）：</el-tag>
        <el-slider v-model="state.form.more" />
        <p class="ml20">{{ Number(state.form.more) * 10 }}kcal</p>
      </div>
    </el-col>
  </el-row>

  <el-row class="mb24" :gutter="20">
    <el-col :span="24">
      <el-alert
        title="当前三大营养素建议"
        :show-icon="false"
        type="warning"
        show-icon
        :closable="false"
      >
        <div class="tip-wrap">
          <el-icon :size="18" @click="showTip">
            <QuestionFilled />
          </el-icon>
          <ul>
            <li>蛋白质：2g / kg</li>
            <li>脂肪：1.1g / kg</li>
          </ul>
        </div>
      </el-alert>
    </el-col>
  </el-row>

  <el-descriptions
    title="结果："
    :column="3"
    size="large"
    border
  >
    <el-descriptions-item label="基础代谢（bmr） / 每日基础消耗">{{ bmr }}kcal</el-descriptions-item>
    <el-descriptions-item label="训练日摄入热量">{{ heat }}kcal</el-descriptions-item>
    <el-descriptions-item label="休息日摄入热量">{{ restHeat }}kcal</el-descriptions-item>
    <el-descriptions-item label="训练日碳水" :span="2">{{ carbohydrate }}g</el-descriptions-item>
    <el-descriptions-item label="休息日碳水">{{ restCarbohydrate }}g</el-descriptions-item>
    <el-descriptions-item label="蛋白质">{{ protein }}g</el-descriptions-item>
    <el-descriptions-item label="脂肪">{{ fat }}g</el-descriptions-item>
  </el-descriptions>

  <el-dialog v-model="tipVisible" title="小提示">
    <ul>
      <li>1g碳水和蛋白质可以产生4kcal的热量</li>
      <li>1g脂肪可产生8kcal的热量</li>
    </ul>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, watch, computed, getCurrentInstance} from 'vue'
import {QuestionFilled} from '@element-plus/icons-vue'

const bmr = ref('')
const pa = ref('1.375')
const paList = ref([
  {
    label: '1.0',
    value: '基本：1.0'
  },
  {
    label: '1.200',
    value: '伏案工作（活动量很小或无运动）：1.200'
  },
  {
    label: '1.375',
    value: '轻微活动（每周低强度运动1~3天）：1.375'
  },
  {
    label: '1.550',
    value: '中等活动（每周6~7天中等强度运动）：1.550'
  },
  {
    label: '1.725',
    value: '积极活动（每周6~7天高强度运动）：1.725'
  },
  {
    label: '1.900',
    value: '非常活跃（高强度（每天两次）训练 / 体力工作）：1.900'
  },
])
const tipVisible = ref(false)

const state = reactive({
  birthday: '1996',
  form: {
    height: '178',
    weight: '',
    age: '',
    more: 20
  }
})

const {$storage} = getCurrentInstance().appContext.config.globalProperties

const clear = () => {
  pa.value = '1.375'
  state.birthday = ''
  state.form = {
    height: '178',
    weight: '',
    age: '',
    more: 20
  }
  bmr.value = ''
}

// 训练日热量
const heat = computed(() => {
  return (bmr.value * Number(pa.value) + Number(state.form.more) * 10).toFixed(1)
})

// 休息日热量
const restHeat = computed(() => {
  return (bmr.value * 1.0 + Number(state.form.more) * 10).toFixed(1)
})

// 训练日碳水
const carbohydrate = computed(() => {
  return ((heat.value - (2 * Number(state.form.weight) * 4) - (1.1 * Number(state.form.weight) * 8)) / 4).toFixed(2)
})

// 休息日碳水
const restCarbohydrate = computed(() => {
  return (restHeat.value - (2 * Number(state.form.weight) * 4) - (1.1 * Number(state.form.weight) * 8)) / 4
})

// 蛋白质
const protein = computed(() => {
  return 2 * Number(state.form.weight)
})

// 脂肪
const fat = computed(() => {
  return 1.1 * Number(state.form.weight)
})

const showTip = () => {
  tipVisible.value = true
}

watch(
  () => state.birthday,
  (n) => {
    if (n === '') return
    state.form.age = new Date().getFullYear() - Number(n)
  },
  {immediate: true}
)

watch(
  () => state.form,
  (n) => {
    // console.log(n)
    let {height, weight, age} = n
    if (height && weight && age) {
      bmr.value = (66 + (13.7 * Number(weight)) + (5 * Number(height)) - (6.8 * age)).toFixed(1)
    }
  },
  {deep: true}
)
</script>

<style scoped lang="less">
.tip-wrap {
  display: flex;
}

ul {
  margin-left: 30px;

  li {
    list-style: disc;
  }
}

</style>
